<template>
  <view>
    <view class="bg-content">
      <image class="bg-img" :src="bgUrl" mode=""></image>

      <view class="title-box" v-if="coverUrl" v-for="(item, index) in titleList" :key="index" :style="[generateStyleObject(item)]">
        <image :style="{ width: '100%' }" v-if="checkMediaType(coverUrl) === 'video'" :src="coverUrl + ossVideoCover" mode="widthFix"></image>
        <image :style="{ width: '100%' }" v-if="checkMediaType(coverUrl) === 'image'" :src="coverUrl" mode="widthFix"></image>
        <image src="/static/new/icon_shuzhiren_error.png" @click="del" style="width: 40rpx; height: 40rpx; position: absolute; right: 5rpx; top: 5rpx"></image>
      </view>
      <view class="title-box" v-else style="left: 50%; top: 50%; transform: translate(-50%, -50%)">
        <mediaPic :list="authList" :max="max" :len="1" :size="100" :isAuth="false" @success="media_pic_success($event)"> </mediaPic>
      </view>
    </view>
    <view class="all-box">
      <view class="all-top" style="color: #fff; padding: 30rpx">
        名称：
        <input v-model="editobj.name" placeholder-style="font-size:28rpx;width:100%" @change="namechange" placeholder="请输入" />
      </view>
      <view class="opt-box zl-flex zl-row-between">
        <view class="zl-flex">
          <!-- <view @click="edit()" class="zl-flex-col zl-col-center zl-m-r-50">
            <image style="width: 50rpx; height: 50rpx" src="/static/icon/fontedit.png" mode=""></image>
            <view class="zl-m-t-12 zl-color-white zl-font-26"> 编辑 </view>
          </view> -->
          <view @click="size()" class="zl-flex-col zl-col-center zl-m-r-50">
            <image style="width: 50rpx; height: 50rpx" src="/static/icon/fontSize.png" mode=""></image>
            <view class="zl-m-t-12 zl-color-white zl-font-26"> 大小 </view>
          </view>
          <view @click="location()" class="zl-flex-col zl-col-center zl-m-r-50">
            <image style="width: 50rpx; height: 50rpx" src="/static/icon/fontlocation.png" mode=""></image>
            <view class="zl-m-t-12 zl-color-white zl-font-26"> 位置 </view>
          </view>
          <view @click="time()" class="zl-flex-col zl-col-center" v-if="checkMediaType(coverUrl) === 'image'">
            <image style="width: 50rpx; height: 50rpx" src="/static/icon/fonttime.png" mode=""></image>
            <view class="zl-m-t-12 zl-color-white zl-font-26"> 时长 </view>
          </view>
        </view>
        <view @click="submit()" class="save-btn zl-m-l-60"> 保存 </view>
      </view>
    </view>
    <!-- 字号弹框 -->
    <uni-popup background-color="#242424" ref="Sizepop" type="bottom" border-radius="20rpx 20rpx 0 0">
      <view class="pop-box">
        <view class="pop-top zl-flex zl-row-between">
          <view class="video_poo_title">大小</view>
          <image @click="$refs.Sizepop.close()" style="width: 30rpx; height: 30rpx" src="/static/icon/popclose2.png" mode="widthFix"> </image>
        </view>
        <view class="pop-content">
          <view class="zl-flex zl-p-l-30 zl-p-r-30">
            <text class="zl-font-30 zl-color-white zl-m-r-40">宽</text>
            <uni-number-box :step="step" @change="widthchange" :value="editobj.sizePro" background="#393A3C" color="#fff" />
            <text class="zl-font-30 zl-color-white zl-m-l-10">%</text>
          </view>
          <view class="surebtn zl-m-t-80" @click="sureSizepop()"> 确定 </view>
        </view>
      </view>
    </uni-popup>
    <!-- 位置弹框 -->
    <uni-popup background-color="#242424" ref="locationpop" type="bottom" border-radius="20rpx 20rpx 0 0">
      <view class="pop-box">
        <view class="pop-top zl-flex zl-row-between">
          <view class="video_poo_title">位置</view>
          <image @click="$refs.locationpop.close()" style="width: 30rpx; height: 30rpx" src="/static/icon/popclose2.png" mode="widthFix"> </image>
        </view>
        <view class="pop-content">
          <!-- <view class="zl-flex zl-p-l-30 zl-p-r-30">
            <text class="zl-font-30 zl-color-white zl-m-r-40">是否居中</text>
            <switch style="transform: scale(0.7)" color="#5AC259" @change="isAlignCenterChange" :checked="editobj.isAlignCenter"></switch>
          </view> -->
          <view class="zl-flex zl-m-t-40 zl-p-l-30 zl-p-r-30">
            <text class="zl-font-30 zl-color-white zl-m-r-40">距离左侧</text>
            <uni-number-box :step="step" @change="leftchange" :value="editobj.x" background="#393A3C" color="#fff" />
            <text class="zl-font-30 zl-color-white zl-m-l-10">%</text>
          </view>
          <view class="zl-flex zl-p-l-30 zl-p-r-30 zl-m-t-40">
            <text class="zl-font-30 zl-color-white zl-m-r-40">距离顶部</text>
            <uni-number-box :step="step" @change="topchange" :value="editobj.y" background="#393A3C" color="#fff" />
            <text class="zl-font-30 zl-color-white zl-m-l-10">%</text>
          </view>
          <view class="surebtn zl-m-t-80" @click="surelocation()"> 确定 </view>
        </view>
      </view>
    </uni-popup>
    <!-- 时长弹框 -->
    <uni-popup background-color="#242424" ref="timepop" type="bottom" border-radius="20rpx 20rpx 0 0">
      <view class="pop-box">
        <view class="pop-top zl-flex zl-row-between">
          <view class="video_poo_title">显示时长</view>
          <image @click="$refs.timepop.close()" style="width: 30rpx; height: 30rpx" src="/static/icon/popclose2.png" mode="widthFix"> </image>
        </view>
        <view class="pop-content">
          <view class="zl-flex zl-m-t-40 zl-p-l-30 zl-p-r-30">
            <text class="zl-font-30 zl-color-white zl-m-r-40">时长（秒）</text>
            <uni-number-box :step="step" @change="timechange" :value="editobj.time" background="#393A3C" color="#fff" />
          </view>
          <view class="surebtn zl-m-t-80" @click="suretime()"> 确定 </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import mediaPic from '@/components/media_pic.vue'
export default {
  components: {
    mediaPic
  },
  data() {
    return {
      step: 1,
      titlecur: 0,
      titleList: [
        {
          mateId: 0,
          pipId: 0,
          name: '',
          sizePro: 50,
          width: 0,
          height: 0,
          x: 25,
          y: 0,
          //   isTiming: false,
          time: 3
        }
      ],

      optcur: 0,
      editobj: {},
      stylecur: 1,
      optcur: 0,
      bgUrl: 'https://oop-zl-ice.oss-cn-hangzhou.aliyuncs.com/app_static/zh/oth_tit.png',
      coverUrl: '',
      ossVideoCover: '?x-oss-process=video/snapshot,t_1000,f_png,w_720,m_fast,ar_auto', //视频封面图
      mediaType: 'image',
      cursor: 0
    }
  },
  onLoad(opt) {
    console.log(getApp().globalData.temp_coverUrl, 'getApp().globalData.temp_coverUrl')

    if (getApp().globalData.temp_coverUrl) {
      this.bgUrl = getApp().globalData.temp_coverUrl
    }
    if (opt && opt.pipId) {
      this.getpip(opt.pipId)
    } else {
      if (this.titleList.length > 0) {
        this.editobj = this.titleList[0]
      }
    }
    this.cursor = opt.cursor
  },
  onUnload() {
    getApp().globalData.temp_titles = []
  },
  methods: {
    checkMediaType(url) {
      if (!url || typeof url !== 'string') return 'unknown'

      // 提取后缀名（兼容带查询参数和哈希的URL）
      const extension = url
        .split('?')[0] // 去除查询参数
        .split('#')[0] // 去除哈希
        .split('.')
        .pop()
        .toLowerCase()

      // 图片格式列表（可根据需要扩展）
      const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg', 'tiff', 'ico']

      // 视频格式列表（可根据需要扩展）
      const videoExtensions = ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'mpeg', '3gp']

      if (imageExtensions.includes(extension)) {
        return 'image'
      }
      if (videoExtensions.includes(extension)) {
        return 'video'
      }
      return 'unknown'
    },
    // getpip
    getpip(pipId) {
      this.api.pip
        .getpip({
          pipId: pipId
        })
        .then((res) => {
          if (res.code === 0) {
            this.titleList = [res.data]
            this.coverUrl = res.data.coverUrl
            this.editobj = res.data
          } else {
            this.$util.msg(res.msg)
          }
        })
        .catch((err) => {
          this.$util.msg('请检查网络连接！')
        })
    },
    media_pic_success(res) {
      console.log(res)
      if (res) {
        this.authList = res
        if (res[0]) {
          this.coverUrl = res[0].url
          this.mediaType = res[0].mediaType
          this.titleList[0].mateId = res[0].mateId
          this.titleList[0].width = res[0].width
          this.titleList[0].height = res[0].height
          //   this.editobj.width = res[0].width
          //   this.editobj.height = res[0].height
        }
      }
    },
    generateStyleObject(item) {
      return {
        width: `${item.sizePro * 750 * 0.01}rpx`,
        top: item.y * 13.33 + 'rpx',
        left: item.x + '%'
      }
    },
    size() {
      this.$refs.Sizepop.open()
    },
    location() {
      this.$refs.locationpop.open()
    },
    time() {
      this.$refs.timepop.open()
    },
    setconfig() {
      this.titleList[this.titlecur] = this.editobj
    },
    // 标题大小
    widthchange(value) {
      this.editobj.sizePro = value
    },
    //标题y轴位置
    topchange(value) {
      this.editobj.y = value
    },
    //标题x轴位置
    leftchange(value) {
      this.editobj.x = value
    },
    namechange(e) {
      this.editobj.name = e.detail.value
    },
    // isAlignCenterChange(e) {
    //   this.editobj.isAlignCenter = e.detail.value
    //   this.editobj.x = 0
    // },
    //标题时长
    timechange(value) {
      this.editobj.time = value
    },
    sureSizepop() {
      this.setconfig()
      this.$refs.Sizepop.close()
    },
    surelocation() {
      this.setconfig()
      this.$refs.locationpop.close()
    },
    suretime() {
      this.setconfig()
      this.$refs.timepop.close()
    },
    del() {
      this.coverUrl = ''
      this.titleList[0].mateId = 0
    },
    submit() {
      //   uni.$emit('titleStyle', this.titleList)

      if (this.editobj.mateId <= 0) {
        return this.$util.msg('请上传素材！')
      }
      if (this.editobj.name == '') {
        return this.$util.msg('请输入名称！')
      }

      this.api.pip
        .savepip({
          pipId: this.editobj.pipId,
          mateId: this.editobj.mateId,
          name: this.editobj.name,
          sizePro: this.editobj.sizePro,
          width: this.editobj.width,
          height: this.editobj.height,
          x: this.editobj.x,
          y: this.editobj.y,
          time: this.editobj.time
        })
        .then((res) => {
          if (res.code === 0) {
            this.$util.msg('保存成功！')

            setTimeout(() => {
              uni.$emit('setPipId', this.cursor)
              uni.navigateBack()
            }, 1000)
          } else {
            this.$util.msg(res.msg)
          }
        })
        .catch((err) => {
          this.$util.msg('请检查网络连接！')
        })
    }
  }
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  height: 0;
}

.bg-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  .bg-img {
    width: 100%;
    height: 1333rpx;
  }

  .title-box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    z-index: 1;
    font-weight: 600;
    // max-width: 600rpx;
    white-space: nowrap;
    letter-spacing: 4rpx;
  }
}

.all-box {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 9;
  width: 750rpx;
  background-color: #242424;

  .all-top {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    padding: 0 26rpx;
    border-bottom: 2rpx solid rgba(225, 225, 225, 0.2);

    .left-scroll {
      width: 540rpx;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      height: 90rpx;

      .left-item {
        position: relative;
        display: inline-block;
        width: 90rpx !important;
        height: 90rpx;
        // overflow: hidden;
        margin-right: 60rpx;
        border-bottom: 5rpx solid #242424;
        text-align: center;
        line-height: 90rpx;
        color: #fff;
        opacity: 0.6;

        .delicon {
          position: absolute;
          right: -40rpx;
          top: 30rpx;
          // margin-left: 10rpx;
          width: 30rpx;
          height: 30rpx;
          z-index: 99;
        }
      }

      .act {
        border-bottom: 5rpx solid #fff;
        opacity: 1;
      }
    }
  }

  .opt-box {
    padding: 42rpx;

    .save-btn {
      width: 150rpx;
      height: 90rpx;
      background: #ffffff;
      border-radius: 10rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #000000;
      text-align: center;
      line-height: 90rpx;
    }
  }
}

.pop-box {
  width: 750rpx;
  background-color: #262626;
  border-radius: 20rpx 20rpx 0 0;

  .pop-top {
    height: 120rpx;
    padding: 0 30rpx;
    border-bottom: 1px solid rgba(225, 225, 225, 0.2);
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #fff;
  }

  .pop-content {
    padding: 32rpx 0 40rpx;

    .textarea2 {
      width: 690rpx;
      height: 230rpx;
      background: #393a3c;
      border-radius: 20rpx;
      padding: 30rpx;
      box-sizing: border-box;
      margin: 0 auto;
      color: #fff;
    }

    .surebtn {
      width: 690rpx;
      height: 110rpx;
      background: #393a3c;
      box-shadow: 0rpx 20rpx 20rpx 0rpx rgba(26, 26, 26, 0.15);
      border-radius: 10rpx;
      font-weight: 600;
      font-size: 36rpx;
      color: #ffffff;
      text-align: center;
      line-height: 110rpx;
      margin: 38rpx auto 0;
    }
  }

  .timechoose {
    width: 164rpx;
    height: 60rpx;
    background: #393a3c;
    box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(26, 26, 26, 0.15);
    border-radius: 8rpx;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
    line-height: 64rpx;
  }

  .acttime {
    background-color: #eb5e00 !important;
  }

  .color-box {
    width: 1000rpx;
    display: flex;
    flex-wrap: nowrap;
    margin-top: 8rpx;
    padding: 0 30rpx;
    overflow-x: scroll;
    white-space: nowrap;

    .no_round {
      width: 80rpx;
      height: 80rpx;
      margin-right: 30rpx;
      border-radius: 40rpx;
    }

    .chooseNo {
      width: 72rpx !important;
      height: 72rpx !important;
      border: 4rpx solid #fff;
    }

    .noLine {
      border: 0;
    }
  }
}
</style>
